<template>
	<a-card class="general-card" :title="$t('ying-ye-fen-xi')" :header-style="{ paddingBottom: '12px' }">
		<div class="mb-2">{{
            $t('ying-ye-teamtimefilterbooleanjoin', [
                teamTime.filter(Boolean).join(' ~ '),
            ])
        }}</div>
		<a-grid :cols="24" :col-gap="12" :row-gap="12">
			<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
				<analysis-item :title="$t('shi-shou-jine-yuan')" :data="renderData" value-key="realAmount"
					:loading="loading" :card-style="{
                        background: isDark
                            ? 'linear-gradient(180deg, #284991 0%, #122B62 100%)'
                            : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)',
                    }" />
			</a-grid-item>
			<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
				<analysis-item :title="$t('xiao-shoue-yuan')" :data="renderData" value-key="totalAmount"
					:loading="loading" :card-style="{
                        background: isDark
                            ? ' linear-gradient(180deg, #3D492E 0%, #263827 100%)'
                            : 'linear-gradient(180deg, #F5FEF2 0%, #E6FEEE 100%)',
                    }" />
			</a-grid-item>
			<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
				<analysis-item :title="$t('jia-zhu-liang-kg')" :data="renderData" value-key="totalVolume"
					:loading="loading" :card-style="{
                        background: isDark
                            ? 'linear-gradient(180deg, #494B94 0%, #0F275C 100% )'
                            : 'linear-gradient(180deg, #D7D7FF 0%, #e6f4fe 100%)',
                    }" />
			</a-grid-item>
			<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
				<analysis-item :title="$t('you-hui-jine-yuan')" :data="renderData" value-key="discountAmount"
					:loading="loading" :card-style="{
                        background: isDark
                            ? 'linear-gradient(180deg, #312565 0%, #201936 100%)'
                            : 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)',
                    }" />
			</a-grid-item>
			<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
				<analysis-item :title="$t('ding-dan-liang-dan')" :data="renderData" value-key="orderNum"
					:loading="loading" :card-style="{
                        background: isDark
                            ? 'linear-gradient(180deg, #3D492E 0%, #263827 100%)'
                            : 'linear-gradient(180deg, #F5FEF2 0%, #E6FEEE 100%)',
                    }" />
			</a-grid-item>
			<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 4, xxl: 4 }">
				<analysis-item :title="$t('xin-zeng-ji-fen')" :data="renderData" value-key="score" :loading="loading"
					:card-style="{
                        background: isDark
                            ? 'linear-gradient(180deg, #FFD3A5 0%, #FD6585 100%)'
                            : 'linear-gradient(180deg, #FFF5F5 0%, #FFE6E6 100%)',
                    }" />
			</a-grid-item>
		</a-grid>
	</a-card>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import dayjs from 'dayjs';
	import useThemes from '@/hooks/themes';
	import useLoading from '@/hooks/loading';
	import AnalysisItem from './analysis-item.vue';
	import { getAnalysisData, getTeamTime } from '../service';

	const { loading, setLoading } = useLoading();
	const renderData = ref({});
	const teamTime = ref([]);

	async function load() {
		try {
			setLoading(true);
			teamTime.value.push(
				dayjs().format('YYYY-MM-DD 00:00:00') || '',
				dayjs().format('YYYY-MM-DD HH:mm:ss')
			);

			const data = await getAnalysisData({'beginTime':''});
			renderData.value = data.result;
		} finally {
			setLoading(false);
		}
	}
	load();
	const { isDark } = useThemes();
</script>